import React from 'react';
import { StatusAbleIcon, getStatus } from '../instance-status-icon';
import Empty from '../empty';
import './index.scss';

const InstanceStatus = ({
  number,
  status = '',
  resultStatus = '',
  statusName,
  size = 'default',
  pipeline_id,
  pipeline_name,
  startTimeInterval = () => {},
}) => {
  if (number && status) {
    const s = getStatus(status, resultStatus);
    return (
      <ul className={`instance-status instance-status-${size} instance-status-${s}`}>
        <li>
          <a
            href={`https://flow.aliyun.com/pipelines/${pipeline_id}/builds/${number}`}
            target="_blank"
            rel="noreferrer"
            onClick={startTimeInterval}
          >
            {pipeline_name ? `${pipeline_name} ` : ''}#{number}
          </a>
        </li>
        <li>-</li>
        <li>
          <StatusAbleIcon status={status} resultStatus={resultStatus} />
        </li>
        <li>{statusName}</li>
      </ul>
    );
  }
  return <Empty />;
};

export default InstanceStatus;
